<template>

    <span class="ccc" :style="{'left':distance,'top':km}">{{title}}</span>
</template>

<script>
export default {
    props:[
    'title',
    'distance',
    'km'
    ],
}
</script>

<style lang="scss" scoped>
.ccc{
    position: absolute;
    top: 38%;
    left: 14.5%;
    z-index: 9999;
    font-size: 17px;
    color: #fffdff;
    height: 9%;
    width: 9%;
    // border: 1px solid;
    text-align: center;
    cursor: pointer;
    
    }
     .ccc:hover{
        color: red;
    }
    @media screen and (max-width:1276px){
.ccc{font-size: 12px !important;}
}
  @media screen and (max-width:1657px){
.ccc{font-size: 15px !important;}
}
@media screen and (max-width:1467px){
.ccc{font-size: 13px !important;}
}
</style>